 <template>
<div style="padding:10px 20px;" class="overflowY">
  <div>
    <el-button type="text" icon="el-icon-circle-plus-outline">新增</el-button>
    <el-button type="text" icon="el-icon-delete">删除</el-button>
    <el-button type="text" icon="el-icon-printer">打印</el-button>
    <el-button type="text" icon="el-icon-setting">协同按钮</el-button>
    <el-button type="text" icon="iconfont icon-gongzuoliuchengtu">流程图</el-button>
    <el-button type="text" icon="iconfont icon-dingwei">定位</el-button>
    <el-button type="text" icon="iconfont icon-daoru">导入</el-button>
    <el-button type="text" icon="iconfont icon-jiantou"></el-button>
    <el-button type="text" icon="iconfont icon-jiantouxia"></el-button>
    <el-button type="text" icon="iconfont icon-chexiao">撤销审批</el-button>
    <el-button type="text" icon="iconfont icon-tijiaowendang">提交审批</el-button>
    <el-button type="text" icon="iconfont icon-save">保存</el-button>
    <el-button type="text" icon="iconfont icon-shengpi">审批</el-button>
  </div>
  <!--搜索群组 begin-->
  <div>
    <div class="searchGroup_list">
      <!-- ≥768px 一行放4个  ≥1200px 一行放6个-->
      <el-row :gutter="20">
        <el-col :sm="6" :xl="4">
          <div class="searchBoxList">
            <el-row>
              <el-col :span="6">
                <span class="searchListName">项目编号: </span>
              </el-col>
              <el-col :span="18">
                <el-input size="small" v-model="input1" placeholder="请输入项目编号"></el-input>
              </el-col>
            </el-row>
          </div>
        </el-col>
        <el-col :sm="6" :xl="4">
          <div class="searchBoxList">
            <el-row>
              <el-col :span="6">
                <span class="searchListName">项目名称: </span>
              </el-col>
              <el-col :span="18">
                <el-input size="small" v-model="input2" placeholder="请选择" suffix-icon="el-icon-search"></el-input>
              </el-col>
            </el-row>
          </div>
        </el-col>
        <el-col :sm="6" :xl="4">
          <div class="searchBoxList">
            <el-row>
              <el-col :span="6">
                <span class="searchListName">立项人: </span>
              </el-col>
              <el-col :span="18">
                <el-input size="small" v-model="input3" placeholder="请选择" suffix-icon="el-icon-search"></el-input>
              </el-col>
            </el-row>
          </div>
        </el-col>
        <el-col :sm="6" :xl="4">
          <div class="searchBoxList">
            <el-row>
              <el-col :span="6">
                <span class="searchListName">跟踪人: </span>
              </el-col>
              <el-col :span="18">
                <el-input size="small" v-model="input4" placeholder="请选择" suffix-icon="el-icon-search"></el-input>
              </el-col>
            </el-row>
          </div>
        </el-col>
        <el-col :sm="6" :xl="4">
          <div class="searchBoxList">
            <el-row>
              <el-col :span="6">
                <span class="searchListName">开始日期: </span>
              </el-col>
              <el-col :span="18">
                <div class="searchTime" style="width: 100%">
                  <el-date-picker
                    size="small"
                    v-model="input5"
                    type="date"
                    placeholder="选择日期">
                  </el-date-picker>
                </div>
              </el-col>
            </el-row>
          </div>
        </el-col>
        <el-col :sm="6" :xl="4">
          <div class="searchBoxList">
            <el-row>
              <el-col :span="6">
                <span class="searchListName">结束日期: </span>
              </el-col>
              <el-col :span="18">
                <div class="searchTime" style="width: 100%">
                  <el-date-picker
                    size="small"
                    v-model="input6"
                    type="date"
                    placeholder="选择日期">
                  </el-date-picker>
                </div>
              </el-col>
            </el-row>
          </div>
        </el-col>
        <el-col :sm="6" :xl="4">
          <div class="searchBoxList">
            <el-row>
              <el-col :span="6">
                <span class="searchListName">项目类型: </span>
              </el-col>
              <el-col :span="18">
                <el-select v-model="input7" placeholder="请选择" size="small">
                  <el-option
                    v-for="item in options1"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
              </el-col>
            </el-row>
          </div>
        </el-col>
        <el-col :sm="6" :xl="4">
          <div class="searchBoxList">
            <el-row>
              <el-col :span="6">
                <span class="searchListName">项目状态: </span>
              </el-col>
              <el-col :span="18">
                <el-select v-model="input8" placeholder="请选择" size="small">
                  <el-option
                    v-for="item in options2"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
              </el-col>
            </el-row>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
  <!--搜索群组 end-->
  <div style="border:1px solid #cccccc;margin-top: 10px;">
      <div class="objectHeader" style="width: 100%;padding-left: 15px;border-bottom:1px solid #ccc;">
        <i class="el-icon-date"></i>
        <span>立项项目列表</span>
      </div>
    <el-row>
      <el-col :span="4">
        <!--左侧菜单 begin-->
        <leftMenu :msgData="leftMenuData" :isBorder="isBorderShow"></leftMenu>
        <!--左侧菜单 end-->
      </el-col>
      <el-col :span="20">
        <el-table
          :data="tableData"
          tooltip-effect="dark"
          :summary-method="getSummaries"
          show-summary
          style="width: 100%"
          @selection-change="handleSelectionChange">
          <el-table-column
            type="selection"
            width="45">
          </el-table-column>
          <el-table-column
            width="50"
            align="center"
            label="序号">
            <template slot-scope="scope">
              <span>{{scope.$index + 1}}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="number"
            label="项目编号"
            show-overflow-tooltip
            width="120">
          </el-table-column>
          <el-table-column
            prop="name"
            label="项目名称"
            show-overflow-tooltip
            width="120">
          </el-table-column>
          <el-table-column
            prop="object"
            label="项目类型"
            show-overflow-tooltip>
          </el-table-column>
          <el-table-column
            prop="state"
            label="项目状态"
            show-overflow-tooltip>
          </el-table-column>
          <el-table-column
            prop="initiator"
            label="立项人"
            show-overflow-tooltip>
          </el-table-column>
          <el-table-column
            prop="trackingPeople"
            label="项目跟踪人"
            width="100"
            show-overflow-tooltip>
          </el-table-column>
          <el-table-column
            prop="company"
            label="建设单位"
            show-overflow-tooltip>
          </el-table-column>
          <el-table-column
            prop="beginTime"
            width="100"
            label="开始时间"
            show-overflow-tooltip>
          </el-table-column>
          <el-table-column
            prop="endTime"
            width="100"
            label="结束时间"
            show-overflow-tooltip>
          </el-table-column>
          <el-table-column
            prop="engineerinCost"
            width="110"
            label="工程造价"
            show-overflow-tooltip>
          </el-table-column>
        </el-table>
        <div class="fullPage_paging">
          <paging :size-change="handleSizeChange"
                  :current-change="handleCurrentChange"
                  :page-sizes="pageSizes"
                  :page-num="pageNum"
                  :total-num="totalNum">
          </paging>
        </div>
      </el-col>
    </el-row>
  </div>
</div>
</template>

<script>
import paging from '@/components/demoAssembly/paging' // 分页
import leftMenu from '@/components/demoAssembly/leftMenu' // 左侧菜单
export default {
  name: 'complete',
  // isBorderShow ==> ''表示菜单不带边框，all表示菜单带边框，left表示菜单带左侧边框，right表示菜单带右侧边框，top表示菜单带上面边框，bottom表示菜单带下面边框
  data() {
    return {
      pageSizes: [10, 20, 30, 40],
      pageNum: 10,
      totalNum: 50,
      handleSizeChange() {
        alert('pageSize 改变时触发')
      },
      handleCurrentChange() {
        alert('currentPage 改变时会触发')
      },
      isBorderShow: 'right',
      input1: '',
      input2: '',
      input3: '',
      input4: '',
      input5: '',
      input6: '',
      input7: '',
      input8: '',
      options1: [{
        value: '0',
        label: '项目类型1'
      }, {
        value: '1',
        label: '项目类型2'
      }, {
        value: '2',
        label: '项目类型3'
      }],
      options2: [{
        value: '0',
        label: '开始'
      }, {
        value: '1',
        label: '未开始'
      }],
      isactive: 0,
      tableData: [
        {
          number: '12345678',
          date: '2016-05-03',
          name: '项目名称1',
          object: '项目类型1',
          state: '开始',
          initiator: '张三',
          trackingPeople: '李四',
          company: 'xxx单位',
          beginTime: '2016/01/02',
          endTime: '2016/02/03',
          engineerinCost: '250000'
        },
        {
          number: '12345678',
          date: '2016-05-03',
          name: '项目名称1',
          object: '项目类型1',
          state: '开始',
          initiator: '张三',
          trackingPeople: '李四',
          company: 'xxx单位',
          beginTime: '2016/01/02',
          endTime: '2016/02/03',
          engineerinCost: '250000'
        },
        {
          number: '12345678',
          date: '2016-05-03',
          name: '项目名称1',
          object: '项目类型1',
          state: '开始',
          initiator: '张三',
          trackingPeople: '李四',
          company: 'xxx单位',
          beginTime: '2016/01/02',
          endTime: '2016/02/03',
          engineerinCost: '250000'
        },
        {
          number: '12345678',
          date: '2016-05-03',
          name: '项目名称1',
          object: '项目类型1',
          state: '开始',
          initiator: '张三',
          trackingPeople: '李四',
          company: 'xxx单位',
          beginTime: '2016/01/02',
          endTime: '2016/02/03',
          engineerinCost: '250000'
        },
        {
          number: '12345678',
          date: '2016-05-03',
          name: '项目名称1',
          object: '项目类型1',
          state: '开始',
          initiator: '张三',
          trackingPeople: '李四',
          company: 'xxx单位',
          beginTime: '2016/01/02',
          endTime: '2016/02/03',
          engineerinCost: '250000'
        }
      ],
      leftMenuData: ['全部', '房建', '市政', '园林', '机电', '电力', '全部', '房建', '市政', '园林', '机电', '电力', '公路', '铁路', '水利', '通讯', '化工', '港口', '装饰'],
    }
  },
  components: {
    paging,
    leftMenu
  },
  methods: {
    selection(item) {
      this.isactive = item
    },
    handleSelectionChange(val) { // 当选择项发生变化时会触发该事件,val返回选中行
      console.log(val)
    },
    getSummaries(param) {
      const { columns, data } = param
      const sums = []
      columns.forEach((column, index) => {
        if (index === 1) {
          sums[index] = '合计'
          return
        }
        const values = data.map(item => Number(item[column.property]))
        if (column.property === 'engineerinCost') {
          sums[index] = values.reduce((prev, curr) => {
            const value = Number(curr)
            if (!isNaN(value)) {
              return prev + curr
            } else {
              return prev
            }
          }, 0)
          // sums[index] += ' 元'
        } else {
          sums[index] = ''
        }
      })

      return sums
    }
  }
}
</script>
 <style >
   .el-button--text{
     color:#333333FF!important;
   }
   .el-button--text:hover{
     color: #0d8aee!important;
   }
 </style>
<style scoped>
  .leftMent_box ul li{
    width: 100%;
   }
  .leftMent_box ul li span{
    font-size: 14px;
    color: #333333;
    height: 30px;
    line-height: 30px;
    display: inline-block;
    width: 100%;
    padding-left: 10px;
    cursor: pointer;
    transition: all .3s;
  }
  .leftMent_box ul li span:hover, .activeList{
    background-color: #409EFF;
    color: #ffffff !important;
  }
  .searchBoxList{
    margin-top: 10px;
  }
  .searchGroup_list:first-child{
    margin-top: 0;
  }
  .searchGroup_list .searchListName{
    font-size: 14px;
    color: #333333;
    display: inline-block;
    vertical-align: middle;
    line-height: 32px;
  }
  .searchTime{
    width: 100%;
  }
  .searchTime > div{
    width: 100%;
  }
  .objectHeader{font-size: 0;}
  .objectHeader i{
    font-size: 16px;
    margin-right: 6px;
    display: inline-block;
    vertical-align: middle;
  }
  .objectHeader span{
    font-size: 14px;
    color: #333333;
    display: inline-block;
    vertical-align: middle;
    line-height: 35px;
  }
</style>

